<template>
	<view class="order-list">
		<view class="header">查看历史工单</view>

		<!-- 筛选区域 -->
		<view class="filter-card">
			<view class="filter-item">
				<text class="form-label">工单操作状态</text>
				<picker mode="selector" :range="statusOptions" @change="onStatusChange">
					<view class="picker">
						{{ selectedStatusText ? '已选状态：' + selectedStatusText : '请选择状态' }}
					</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">工单类型</text>
				<picker mode="selector" :range="typeOptions" @change="onTypeChange">
					<view class="picker">
						{{ selectedTypeText ? '已选类型：' + selectedTypeText : '请选择类型' }}
					</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">创建时间</text>
				<picker mode="date" @change="onDateChange">
					<view class="picker">
						{{ formData.createTime || '请选择创建时间' }}
					</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">起始页</text>
				<input type="number" v-model="formData.page" placeholder="起始页" />
			</view>

			<view class="filter-item">
				<text class="form-label">页大小</text>
				<input type="number" v-model="formData.pageSize" placeholder="页大小" />
			</view>

			<button class="submit-button" @click="loadOrders">查询</button>
		</view>

		<!-- 列表展示 -->
		<view v-if="orders.length > 0" class="order-table">
			<view v-for="order in orders" :key="order.id" class="order-card">
				<view class="card-title">
					<text class="title-text">工单 #{{ order.id }}</text>
					<text class="status-tag">{{ formatstatus(order.operateStatus) }}</text>
				</view>

				<view class="card-body">
					<view class="card-column">
						<text class="label">工单类型</text>
						<text class="value">{{ order.title }}</text>
					</view>
					<view class="card-column">
						<text class="label">提交人</text>
						<text class="value">{{ order.userName }}</text>
					</view>
					<view class="card-column">
						<text class="label">提交时间</text>
						<text class="value">{{ order.createTime }}</text>
					</view>
					<view class="card-column">
						<text class="label">提交人角色</text>
						<text class="value">{{ order.name }}</text>
					</view>
					<view class="card-column">
						<text class="label">紧急程度</text>
						<text class="value" :class="{
              'urgency-high': order.urgency === 1,
              'urgency-medium': order.urgency === 2,
              'urgency-low': order.urgency === 3
            }">
							{{ formatUrgency(order.urgency) }}
						</text>
					</view>
					<view class="card-column">
						<text class="label">超时预警</text>
						<text class="value" :class="{
              'timeout-yes': formattime(order.TimeOutApproval) === '是',
              'timeout-no': formattime(order.TimeOutApproval) === '否'
            }">
							{{ formattime(order.TimeOutApproval) }}
						</text>
					</view>
				</view>

				<view class="action-row">
					<button class="blue-button" @click="viewOrderback(order.id)">查看回单</button>
				</view>
			</view>
		</view>
		<view v-if="checkmodalvisiable" class="approve-modal">
			<view class="modal-box">
				<view class="modal-header">
					<text class="modal-title">回单详情</text>
					<view class="modal-close" @click="closecheck">关闭</view>
				</view>
				<view class="modal-body">
					<view class="filter-item">
						<label>工单ID：</label>
						<text>{{ task.orderId }}</text>
					</view>
					<view class="filter-item">
						<label>操作员姓名：</label>
						<text>{{ task.operatorName }}</text>
					</view>
					<view class="filter-item">
						<label>操作员职位：</label>
						<text>{{ task.operatorRoleName }}</text>
					</view>
					<view class="filter-item">
						<label>完成时间：</label>
						<text>{{task.completionTime}}</text>
					</view>
					<view class="filter-item">
						<label>故障原因：</label>
						<text>{{task.reason}}</text>
					</view>
					<view class="filter-item">
						<label>故障解决措施：</label>
						<text>{{task.solution}}</text>
					</view>
					<view class="filter-item">
						<label>执行结果</label>
						<text>{{task.result}}</text>
					</view>

				</view>
				<view class="modal-footer">
					<button @click="closecheck" class="blue-button">关闭</button>
				</view>
			</view>
		</view>

		<view v-else-if="orders.length === 0 && loaded" class="no-data">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loaded: false, // 用于标记是否已经加载过数据
				statusMap: { // 状态码与文本的映射关系
					1: '待接单',
					2: '操作中',
					3: '待接受委派',
					4: '委派中',
					5: '完成委派',
					6: '已完成'
				},
				task: {},
				orders: [], // 订单列表
				token: null, // 登录成功后获取的 Token
				formData: {
					title: '', // 工单对应的流程类型的名称
					createTime: '', // 创建时间
					page: 1, // 起始页
					pageSize: 20, // 页大小
					statusList: [] // 工单对应的状态列表，初始化为空数组
				},
				statusOptions: [
					'完成委派', '已完成'
				],
				checkmodalvisiable: false, //回单显示
				selectedStatusText: "", // 用于显示选中的状态文本
				typeOptions: [], // 用于存储从接口获取的类型列表
				selectedTypeText: "" // 用于显示选中的类型文本
			};
		},
		methods: {
			getStatusText(statusCode) {
				return this.statusMap[statusCode] || '未知状态';
			},
			onStatusChange(e) {

				const selectedIndex = e.detail.value;
				this.selectedStatusText = this.statusOptions[selectedIndex];
				this.formData.status = selectedIndex + 5;
			},
			formatstatus(status) {
				switch (status) {
					case 1:
						return "待接单";
					case 2:
						return "操作中";
					case 3:
						return "待接受委派";
					case 4:
						return "委派中";
					case 5:
						return "完成委派";
					case 6:
						return "已完成";

				}
			},
			formatUrgency(urgency) {
				switch (urgency) {
					case 1:
						return '低';
					case 2:
						return '中';
					case 3:
						return '高';
					default:
						return '未知';
				}
			},
			onDateChange(e) {
				const selectedDate = e.detail.value; // 用户选择的日期，格式为 "YYYY-MM-DD"
				const fullDateTime = `${selectedDate} 00:00`; // 将时间设置为 00:00，中间用空格隔开，没有 T
				this.formData.createTime = fullDateTime;
			},
			formattime(timeOut) {
				return timeOut ? '是' : '否';
			},
			closecheck() {
				this.checkmodalvisiable = false;
			},
			async loadOrders() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/operate/historyList",
						method: 'POST',
						header: {
							'Authorization': 'Bearer ' + this.token,
							'Content-Type': 'application/json'
						},
						data: {
							page: this.formData.page,
							pageSize: this.formData.pageSize,
							title: this.formData.title,
							status: this.formData.status, // 直接发送单个状态值
							createTime: this.formData.createTime
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.orders = res.data.data.records;
						this.loaded = true;
					} else {
						uni.showToast({
							title: res.data.msg || '加载订单列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败' + err.message,
						icon: 'none'
					});
				}
			},
			async fetchTypeList() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/TypeList", // 获取类型列表的接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'GET'
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.typeOptions = res.data.data.map(item => item
							.typeName); // 假设返回的数据结构为 [{name: '类型1'}, {name: '类型2'}]
					} else {
						uni.showToast({
							title: '加载类型列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			onTypeChange(e) {
				const selectedIndex = e.detail.value;
				this.selectedTypeText = this.typeOptions[selectedIndex]; // 更新选中的类型文本
				this.formData.title = this.typeOptions[selectedIndex];
			},
			viewOrderback(orderId) {
				this.viewCompletionForm(orderId);
				this.checkmodalvisiable = true;
			},

			async viewCompletionForm(orderId) {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: `http://localhost:8082/api/common/completionForm/${orderId}`,
						method: 'GET',
						header: {
							'Authorization': 'Bearer ' + token
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.task = res.data.data; // 假设返回的数据结构与示例中的data结构一致
						uni.showToast({
							title: "查看回单成功",
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.data.msg || '查看回单失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			}
		},
		mounted() {
			this.fetchTypeList(); // 页面加载时获取类型列表
		}
	};
</script>

<style scoped>
	.order-list {
		padding: 30rpx;
		background: #f4f8fb;
		min-height: 100vh;
	}

	.header {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		color: #1a73e8;
		margin-bottom: 30rpx;
	}

	.filter-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.filter-item {
		margin-bottom: 20rpx;
	}

	.form-label {
		font-weight: 500;
		font-size: 15px;
		color: #333;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.form-label::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #1976d2;
		border-radius: 2px;
		margin-right: 8px;
	}

	.picker,
	input {
		background: #f0f0f0;
		padding: 16rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
	}

	.submit-button {
		margin-top: 20rpx;
		width: 100%;
		background-color: #1a73e8;
		color: #fff;
		font-size: 28rpx;
		padding: 20rpx;
		border-radius: 12rpx;
	}

	.order-card {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.status-tag {
		font-size: 26rpx;
		color: #1a73e8;
		background: #e8f0fe;
		padding: 6rpx 20rpx;
		border-radius: 40rpx;
	}

	.card-body {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx 5%;
	}

	.card-column {
		flex: 1 1 45%;
		margin-bottom: 16rpx;
	}

	.label {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 6rpx;
		margin-right: 20rpx;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	.action-row {
		text-align: right;
		margin-top: 24rpx;
	}

	.blue-button {
		background-color: #1a73e8;
		color: #fff;
		padding: 18rpx 36rpx;
		font-size: 28rpx;
		border-radius: 12rpx;
	}

	.no-data {
		text-align: center;
		font-size: 28rpx;
		color: #999;
		margin-top: 60rpx;
	}

	.urgency-high {
		background-color: #fdecea;
		color: #d93025;
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
	}

	.urgency-medium {
		background-color: #fff4e5;
		color: #f9ab00;
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
	}

	.urgency-low {
		background-color: #e6f4ea;
		color: #188038;
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
	}

	.timeout-no {
		background-color: #e6f4ea;
		color: #188038;
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
	}

	.timeout-yes {
		background-color: #fdecea;
		color: #d93025;
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
	}

	.approve-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-box {
		background: #ffffff;
		padding: 24px;
		border-radius: 12px;
		width: 80%;
		max-width: 360px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.modal-title {
		font-size: 18px;
		color: #2b6cb0;
	}

	.modal-close {
		color: #9ca3af;
		cursor: pointer;
	}

	.filter-item {
		margin-bottom: 16px;
	}

	.filter-item label {
		display: block;
		color: #6b7280;
		margin-bottom: 8px;
	}

	.modal-footer {
		display: flex;
		gap: 12px;
		justify-content: flex-end;
	}

	.blue-button {
		background: #2b6cb0;
		color: #ffffff;
		border-radius: 8px;
		padding: 10px 20px;
	}
</style>